<template>
    <div class="logistics_form_container">
        <el-form ref="stockOutBillLogisticsForm" :rules="rules" :model="formData" label-width="100px" v-enterToNext>
            <el-form-item label="出库单号" prop="outbill_code">
                <el-input v-model="formData.outbill_code" readonly />
            </el-form-item>
            <el-form-item label="发货日期" prop="sent_date">
                <el-date-picker v-model="formData.sent_date" type="date" value-format="yyyy-MM-dd"
                                placeholder="请选择发货日期" style="width: 100%;" />
            </el-form-item>
            <el-form-item label="物流公司" prop="logistics_com">
                <el-select v-model="formData.logistics_com" placeholder="请选择物流公司"
                           style="width: calc(100% - 56px);" clearable>
                    <el-option v-for="(item, index) in expressList" :key="index"
                               :label="item.name" :value="item.sid" />
                </el-select>
                <el-button icon="el-icon-refresh" @click="initExpressList()"></el-button>
                <el-button icon="el-icon-plus" @click="toAddExpress()"
                           v-permission="{permission:'save_base_exprss_org',check_router:'/baseExpress'}" />
            </el-form-item>
            <el-form-item label="物流单号" prop="logistics_bill_no">
                <el-input v-model="formData.logistics_bill_no" placeholder="请输入物流单号" clearable />
            </el-form-item>
            <el-form-item label="收货人姓名" prop="recv_name">
                <el-input v-model="formData.recv_name" placeholder="请输入收货人姓名" clearable />
            </el-form-item>
            <el-form-item label="收货人电话" prop="recv_phone">
                <el-input v-model="formData.recv_phone" placeholder="请输入收货人电话" clearable />
            </el-form-item>
            <el-form-item label="收货人地址" prop="recv_address">
                <el-input v-model="formData.recv_address" type="textarea"
                          placeholder="请输入收货人地址" clearable />
            </el-form-item>
        </el-form>
    </div>
</template>

<script>
export default {
    name: "LogisticsForm",
    props: {
        row: {
            type: Object,
            default: null,
        },
    },
    data() {
        return {
            rowData: {},
            expressList: [],
            rules: {
                code: [
                    { required: true, message: '请输入编号', trigger: 'blur' },
                    { max: 32, message: '最大 32 位字符，内容过长，请删减', trigger: 'blur', },
                ],
                sent_date: [
                    { required: true, message: '请选择发货日期', trigger: 'change' },
                ],
                logistics_com: [
                    { required: true, message: '请输入物流公司', trigger: 'blur' },
                ],
                logistics_bill_no: [
                    { required: true, message: '请输入物流单号', trigger: 'blur' },
                ],
                recv_name: [
                    { required: true, message: '请输入收货人姓名', trigger: 'blur' },
                ],
                recv_phone: [
                    { required: true, message: '请输入收货人电话', trigger: 'blur' },
                ],
                recv_address: [
                    { required: true, message: '请输入收货人地址', trigger: 'blur' },
                ],
            },
            formData: {},
            oldCode: '',
        };
    },
    watch: {
        row: {
            handler() {
                this.init();
            },
            deep: true,
            immediate: true,
        },
    },
    methods: {
        init() {
            const _this = this;
            if (!_this.row) {
                return;
            }
            _this.rowData = $.extend({}, _this.row);
            if (_this.$utils.isEmpty(_this.rowData.sid)) {
                return;
            }
            if (_this.$refs.stockOutBillLogisticsForm) {
                _this.$refs.stockOutBillLogisticsForm.clearValidate();
            }
            _this.initExpressList();
            _this.initLogisticsData();
        },
        initExpressList() {
            const _this = this;
            return _this.fetchData(_this.$api.API_FindBaseExpressOrgs).then(res => {
                _this.expressList = res.data || [];
            }).catch(() => {
            });
        },
        toAddExpress() {
            this.$router.push('/baseExpress');
        },
        initLogisticsData() {
            const _this = this;
            return _this.fetchData(_this.$api.API_QueryLogisticsByOutbillSid, {
                outbill_sid: _this.rowData.sid,
            }).then(res => {
                _this.formData = res.data || {
                    outbill_code: _this.rowData.code,
                };
            }).catch(() => {
            });
        },
        async confirm() {
            const _this = this;
            let valid = await _this.validateForm('stockOutBillLogisticsForm');
            if (!valid) {
                return false;
            }
            let subData = $.extend({}, _this.formData);
            if (_this.$utils.isEmpty(subData.outbill_sid)) {
                subData.outbill_sid = _this.rowData.sid;
            }
            return _this.fetchData(_this.$api.API_SaveJxcStockOutbillLogistics, subData).then(() => {
                _this.$message.success('保存成功！');
                return true;
            }).catch(() => {
                return false;
            });
        },
    },
}
</script>

<style lang="less" rel="stylesheet/less" scoped>
.logistics_form_container {
    width: 100%;
    height: 100%;
    overflow: hidden;
}
</style>
